document.addEventListener('DOMContentLoaded', () => {
    // 游戏状态变量
    let gameBoard = [];
    let emptyTilePos = { row: 0, col: 0 };
    let boardSize = 3; // 默认3x3
    let moveCount = 0;
    let gameStarted = false;
    let currentLevel = 1; // 当前关卡
    let startTime = 0; // 游戏开始时间
    let timerInterval = null; // 计时器间隔

    // DOM元素
    const gameBoardElement = document.getElementById('game-board');
    const difficultySelect = document.getElementById('difficulty-select');
    const levelSelect = document.getElementById('level-select');
    const startButton = document.getElementById('start-button');
    const moveCountElement = document.getElementById('move-count');
    const timeCountElement = document.getElementById('time-count');
    const messageElement = document.getElementById('message');

    // 胜利弹窗元素
    const victoryModal = document.getElementById('victory-modal');
    const victoryLevelElement = document.getElementById('victory-level');
    const victoryMovesElement = document.getElementById('victory-moves');
    const victoryTimeElement = document.getElementById('victory-time');
    const playAgainButton = document.getElementById('play-again-btn');
    const nextLevelButton = document.getElementById('next-level-btn');

    // 各关卡的藏文字母集
    const levelLetters = {
        // 第一关：8个字母
        1: ['ཀ', 'ཁ', 'ག', 'ང', 'ཅ', 'ཆ', 'ཇ', 'ཉ'],
        // 第二关：8个字母
        2: ['ཏ', 'ཐ', 'ད', 'ན', 'པ', 'ཕ', 'བ', 'མ'],
        // 第三关：8个字母
        3: ['ཙ', 'ཚ', 'ཛ', 'ཝ', 'ཞ', 'ཟ', 'འ', 'ཡ'],
        // 第四关：6个字母 + 2个特殊色块
        4: ['ར', 'ལ', 'ཤ', 'ས', 'ཧ', 'ཨ', '◆', '●']
    };

    // 当前关卡的字母集
    let currentLetters = levelLetters[currentLevel];

    // 4×4难度的关卡字母集
    const mediumLevelLetters = {
        // 第一关：前15个字母
        1: ['ཀ', 'ཁ', 'ག', 'ང', 'ཅ', 'ཆ', 'ཇ', 'ཉ', 'ཏ', 'ཐ', 'ད', 'ན', 'པ', 'ཕ', 'བ'],
        // 第二关：后15个字母
        2: ['མ', 'ཙ', 'ཚ', 'ཛ', 'ཝ', 'ཞ', 'ཟ', 'འ', 'ཡ', 'ར', 'ལ', 'ཤ', 'ས', 'ཧ', 'ཨ']
    };

    // 5×7难度的关卡字母集
    const hardLevelLetters = {
        // 所有30个藏文字母和4个元音符号
        1: ['ཀ', 'ཁ', 'ག', 'ང', 'ཅ', 'ཆ', 'ཇ', 'ཉ', 'ཏ', 'ཐ', 'ད', 'ན', 'པ', 'ཕ', 'བ', 'མ',
            'ཙ', 'ཚ', 'ཛ', 'ཝ', 'ཞ', 'ཟ', 'འ', 'ཡ', 'ར', 'ལ', 'ཤ', 'ས', 'ཧ', 'ཨ', 'ི', 'ུ', 'ེ', 'ོ']
    };

    // 初始化事件监听器
    function initEventListeners() {
        startButton.addEventListener('click', startGame);

        difficultySelect.addEventListener('change', () => {
            boardSize = parseInt(difficultySelect.value);
            updateBoardStyle();

            // 根据难度更新关卡选择器
            updateLevelOptions();

            // 如果游戏已经开始，则重新开始游戏
            if (gameStarted) {
                startGame();
            }
        });

        levelSelect.addEventListener('change', () => {
            currentLevel = parseInt(levelSelect.value);

            // 根据当前难度选择字母集
            if (boardSize === 4) {
                currentLetters = mediumLevelLetters[currentLevel];
            } else if (boardSize === 5) {
                currentLetters = hardLevelLetters[currentLevel];
            } else {
                currentLetters = levelLetters[currentLevel];
            }

            // 如果游戏已经开始，则重新开始游戏
            if (gameStarted) {
                startGame();
            }
        });

        // 胜利弹窗按钮事件
        playAgainButton.addEventListener('click', () => {
            hideVictoryModal();
            startGame();
        });

        nextLevelButton.addEventListener('click', () => {
            hideVictoryModal();

            // 获取当前难度下的最大关卡数
            let maxLevel = 4; // 默认3×3难度有4个关卡
            if (boardSize === 4) {
                maxLevel = 2; // 4×4难度有2个关卡
            } else if (boardSize === 5) {
                maxLevel = 1; // 5×5难度只有1个关卡
            }

            // 如果有下一关，则切换到下一关
            if (currentLevel < maxLevel) {
                currentLevel++;
                levelSelect.value = currentLevel;

                // 更新当前关卡的字母集
                if (boardSize === 4) {
                    currentLetters = mediumLevelLetters[currentLevel];
                } else if (boardSize === 5) {
                    currentLetters = hardLevelLetters[currentLevel];
                } else {
                    currentLetters = levelLetters[currentLevel];
                }

                startGame();
            } else {
                // 如果已经是最后一关，则切换到下一个难度
                if (boardSize < 5) {
                    boardSize++;
                    difficultySelect.value = boardSize;
                    updateBoardStyle();
                    updateLevelOptions();
                    startGame();
                } else {
                    // 如果已经是最高难度的最后一关，则重新开始第一关
                    boardSize = 3;
                    difficultySelect.value = boardSize;
                    updateBoardStyle();
                    updateLevelOptions();
                    startGame();
                }
            }
        });
    }

    // 更新关卡选择器
    function updateLevelOptions() {
        // 清空当前选项
        levelSelect.innerHTML = '';

        // 根据当前难度添加关卡选项
        let maxLevel = 4; // 默认3×3难度有4个关卡

        if (boardSize === 4) {
            maxLevel = 2; // 4×4难度有2个关卡
        } else if (boardSize === 5) {
            maxLevel = 1; // 5×5难度只有1个关卡
        }

        for (let i = 1; i <= maxLevel; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = `第${i}关`;
            if (i === 1) {
                option.selected = true;
            }
            levelSelect.appendChild(option);
        }

        // 更新当前关卡
        currentLevel = 1;

        // 根据当前难度选择字母集
        if (boardSize === 4) {
            currentLetters = mediumLevelLetters[currentLevel];
        } else if (boardSize === 5) {
            currentLetters = hardLevelLetters[currentLevel];
        } else {
            currentLetters = levelLetters[currentLevel];
        }
    }

    // 更新游戏板样式
    function updateBoardStyle() {
        if (boardSize === 5) {
            // 7×5布局（7行5列）
            gameBoardElement.style.gridTemplateColumns = `repeat(5, 1fr)`;
            gameBoardElement.style.gridTemplateRows = `repeat(7, 1fr)`;
        } else {
            // 正方形布局
            gameBoardElement.style.gridTemplateColumns = `repeat(${boardSize}, 1fr)`;
            gameBoardElement.style.gridTemplateRows = `repeat(${boardSize}, 1fr)`;
        }
    }

    // 开始计时器
    function startTimer() {
        // 清除之前的计时器
        if (timerInterval) {
            clearInterval(timerInterval);
        }

        // 设置开始时间
        startTime = Date.now();

        // 更新计时器显示
        updateTimer();

        // 设置计时器间隔
        timerInterval = setInterval(updateTimer, 1000);
    }

    // 停止计时器
    function stopTimer() {
        if (timerInterval) {
            clearInterval(timerInterval);
            timerInterval = null;
        }
    }

    // 更新计时器显示
    function updateTimer() {
        const currentTime = Date.now();
        const elapsedSeconds = Math.floor((currentTime - startTime) / 1000);
        const minutes = Math.floor(elapsedSeconds / 60);
        const seconds = elapsedSeconds % 60;

        // 格式化时间显示
        const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        // 更新显示
        timeCountElement.textContent = formattedTime;

        return formattedTime;
    }

    // 开始游戏
    function startGame() {
        gameStarted = true;
        moveCount = 0;
        moveCountElement.textContent = '0';
        messageElement.textContent = '';
        messageElement.className = 'message';

        // 创建有序的游戏板
        createOrderedBoard();

        // 随机打乱游戏板
        shuffleBoard();

        // 渲染游戏板
        renderBoard();

        // 开始计时
        startTimer();

        // 显示开始消息
        showMessage('游戏开始！移动方块，将它们排列成正确的顺序。', 'info');
    }

    // 创建有序的游戏板
    function createOrderedBoard() {
        gameBoard = [];
        let letterIndex = 0;

        // 确定行数和列数
        let rows, cols;
        if (boardSize === 5) {
            // 7×5布局（7行5列）
            rows = 7;
            cols = 5;
        } else {
            // 正方形布局
            rows = boardSize;
            cols = boardSize;
        }

        for (let row = 0; row < rows; row++) {
            const rowArray = [];
            for (let col = 0; col < cols; col++) {
                if (boardSize === 5 && row === rows - 1 && col === cols - 1) {
                    // 7×5布局的最后一个位置是空白格
                    rowArray.push('');
                    emptyTilePos = { row, col };
                } else if (boardSize !== 5 && row === boardSize - 1 && col === boardSize - 1) {
                    // 正方形布局的最后一个位置是空白格
                    rowArray.push('');
                    emptyTilePos = { row, col };
                } else {
                    // 使用当前关卡的藏文字母，如果超出范围则循环使用
                    if (letterIndex < currentLetters.length) {
                        rowArray.push(currentLetters[letterIndex]);
                    } else {
                        // 如果字母用完了，添加空白或特殊符号
                        rowArray.push('◆');
                    }
                    letterIndex++;
                }
            }
            gameBoard.push(rowArray);
        }
    }

    // 随机打乱游戏板
    function shuffleBoard() {
        // 执行随机移动来打乱游戏板
        const moves = boardSize * boardSize * 20; // 足够的随机移动次数

        for (let i = 0; i < moves; i++) {
            const possibleMoves = getValidMoves();
            if (possibleMoves.length > 0) {
                const randomMove = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
                swapTiles(randomMove.row, randomMove.col, false); // 不计入移动次数
            }
        }
    }

    // 获取当前可以移动的位置
    function getValidMoves() {
        const { row, col } = emptyTilePos;
        const moves = [];

        // 确定行数和列数
        let rows, cols;
        if (boardSize === 5) {
            // 7×5布局（7行5列）
            rows = 7;
            cols = 5;
        } else {
            // 正方形布局
            rows = boardSize;
            cols = boardSize;
        }

        // 检查上下左右四个方向
        if (row > 0) moves.push({ row: row - 1, col }); // 上
        if (row < rows - 1) moves.push({ row: row + 1, col }); // 下
        if (col > 0) moves.push({ row, col: col - 1 }); // 左
        if (col < cols - 1) moves.push({ row, col: col + 1 }); // 右

        return moves;
    }

    // 渲染游戏板
    function renderBoard() {
        gameBoardElement.innerHTML = '';

        // 如果游戏未开始，直接返回
        if (!gameStarted) {
            return;
        }

        // 确定行数和列数
        let rows, cols;
        if (boardSize === 5) {
            // 7×5布局（7行5列）
            rows = 7;
            cols = 5;
        } else {
            // 正方形布局
            rows = boardSize;
            cols = boardSize;
        }

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                const tile = document.createElement('div');
                const value = gameBoard[row][col];

                tile.className = value === '' ? 'tile empty' : 'tile';

                if (value !== '') {
                    const tibetanSpan = document.createElement('span');

                    // 检查是否是特殊符号
                    if (value === '◆' || value === '●') {
                        tibetanSpan.className = 'special-symbol';
                        // 为不同的特殊符号添加不同的颜色
                        if (value === '◆') {
                            tile.style.backgroundColor = '#4a76a8';
                        } else if (value === '●') {
                            tile.style.backgroundColor = '#6a9c45';
                        }
                        tibetanSpan.style.color = 'white';
                    } else {
                        tibetanSpan.className = 'tibetan-letter';
                    }

                    tibetanSpan.textContent = value;
                    tile.appendChild(tibetanSpan);

                    // 添加点击事件
                    tile.addEventListener('click', () => {
                        if (gameStarted && canMove(row, col)) {
                            swapTiles(row, col, true);
                            renderBoard();
                            checkWinCondition();
                        }
                    });
                }

                gameBoardElement.appendChild(tile);
            }
        }
    }

    // 检查是否可以移动
    function canMove(row, col) {
        const { row: emptyRow, col: emptyCol } = emptyTilePos;

        // 检查是否与空白格相邻
        return (
            (Math.abs(row - emptyRow) === 1 && col === emptyCol) || // 上下相邻
            (Math.abs(col - emptyCol) === 1 && row === emptyRow)    // 左右相邻
        );
    }

    // 交换方块
    function swapTiles(row, col, countMove) {
        const { row: emptyRow, col: emptyCol } = emptyTilePos;

        // 交换方块值
        const temp = gameBoard[row][col];
        gameBoard[row][col] = '';
        gameBoard[emptyRow][emptyCol] = temp;

        // 更新空白格位置
        emptyTilePos = { row, col };

        // 如果需要计入移动次数
        if (countMove) {
            moveCount++;
            moveCountElement.textContent = moveCount.toString();
        }
    }

    // 检查胜利条件
    function checkWinCondition() {
        // 创建一个有序的参考板
        const orderedBoard = [];
        let letterIndex = 0;

        // 确定行数和列数
        let rows, cols;
        if (boardSize === 5) {
            // 7×5布局（7行5列）
            rows = 7;
            cols = 5;
        } else {
            // 正方形布局
            rows = boardSize;
            cols = boardSize;
        }

        for (let row = 0; row < rows; row++) {
            const rowArray = [];
            for (let col = 0; col < cols; col++) {
                if ((boardSize === 5 && row === rows - 1 && col === cols - 1) ||
                    (boardSize !== 5 && row === boardSize - 1 && col === boardSize - 1)) {
                    rowArray.push('');
                } else {
                    if (letterIndex < currentLetters.length) {
                        rowArray.push(currentLetters[letterIndex]);
                    } else {
                        // 如果字母用完了，添加空白或特殊符号
                        rowArray.push('◆');
                    }
                    letterIndex++;
                }
            }
            orderedBoard.push(rowArray);
        }

        // 比较当前游戏板与有序板
        let isWin = true;
        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                if (gameBoard[row][col] !== orderedBoard[row][col]) {
                    isWin = false;
                    break;
                }
            }
            if (!isWin) break;
        }

        // 如果赢了，显示胜利消息和弹窗
        if (isWin) {
            gameStarted = false;

            // 停止计时器
            stopTimer();

            // 获取最终时间
            const finalTime = timeCountElement.textContent;

            showMessage(`恭喜！您完成了第${currentLevel}关，用了 ${moveCount} 步，时间 ${finalTime}！`, 'success');

            // 显示胜利弹窗
            showVictoryModal();
        }
    }

    // 显示消息
    function showMessage(text, type) {
        messageElement.textContent = text;
        messageElement.className = `message ${type}`;
    }

    // 显示胜利弹窗
    function showVictoryModal() {
        // 更新胜利弹窗内容
        victoryLevelElement.textContent = `第${currentLevel}关`;
        victoryMovesElement.textContent = moveCount;
        victoryTimeElement.textContent = timeCountElement.textContent;

        // 根据当前关卡和难度决定是否显示"下一关"按钮
        let maxLevel = 4; // 默认3×3难度有4个关卡
        if (boardSize === 4) {
            maxLevel = 2; // 4×4难度有2个关卡
        } else if (boardSize === 5) {
            maxLevel = 1; // 5×5难度只有1个关卡
        }

        if (currentLevel === maxLevel && boardSize === 5) {
            // 如果是最高难度的最后一关，则显示"重新开始"
            nextLevelButton.textContent = "重新开始";
        } else {
            nextLevelButton.textContent = "下一关";
        }

        // 显示弹窗
        victoryModal.classList.add('show');

        // 添加点击弹窗外部关闭弹窗的事件
        setTimeout(() => {
            document.addEventListener('click', closeModalOnOutsideClick);
        }, 100);
    }

    // 隐藏胜利弹窗
    function hideVictoryModal() {
        victoryModal.classList.remove('show');
        document.removeEventListener('click', closeModalOnOutsideClick);
    }

    // 点击弹窗外部关闭弹窗
    function closeModalOnOutsideClick(event) {
        if (event.target === victoryModal) {
            hideVictoryModal();
        }
    }

    // 初始化折叠部分
    function initCollapsible() {
        const collapsibleSections = document.querySelectorAll('.collapsible-section');

        collapsibleSections.forEach(section => {
            const header = section.querySelector('.collapsible-header');

            // 默认折叠
            section.classList.remove('active');

            header.addEventListener('click', () => {
                section.classList.toggle('active');
            });
        });
    }

    // 初始化游戏
    function init() {
        updateBoardStyle();
        updateLevelOptions();
        initEventListeners();
        initCollapsible();
    }

    // 启动游戏
    init();
});
